<template>
  <div class="sjfk">
    <p class="descript-title">事件反馈</p>
    <van-form @submit="onSubmit" class="margin-top-12" :show-error-message="false">
      <van-field
        v-model="formParams.eventContent"
        rows="3"
        autosize
        label="事件内容"
        type="textarea"
        placeholder="请输入加分说明"
        name="eventContent"
        :rules="[{ required: true, message: '请输入事件内容' }]"
        required
      />
      <van-field name="uploader" label="附件">
        <template #input>
          <van-uploader v-model="fileList" :after-read="afterRead" />
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { upload } from '@/api/common';
export default {
  name: 'sjfk',
  data() {
    return {
      formParams: {
        sjlx: '',
        eventContent: '',
      },
      fileList: [],
      fileListHt: [],
      fjBackList: []
    }
  },
  methods: {
    afterRead(fileObj) {
      // console.log(fileObj);
      // 此时可以自行将文件上传至服务器
      this.fileListHt.push(fileObj.file)
    },
    async onSubmit(values) {
      await this.uploadImage();
      // console.log('submit', values);
      if(values) {
        let  { eventContent } = values;
        let params = {};
        params.eventContent = eventContent;
        params.fileList = this.fjBackList;
        this.$store.commit('SET_SJFKLIST', params);
        this.$router.back(-1)
      }
    },
    async uploadImage() {
      if(this.fileList.length > 0) {
        let formData = new FormData();
        for(let i= 0; i< this.fileListHt.length; i++) {
          formData.append('file', this.fileListHt[i]);
          await upload(formData).then(res => {
            try {
              // console.log(res)
              this.fjBackList.push({
                filename: res.fileName,
                newfilename: res.newFileName,
                originalfilename: res.originalFilename,
                url: res.url,
              })
            } catch(error) {
              console.log(error)
            }
          })
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
.sjfk {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #F5F5F5;
  .margin-top-12 {
    margin-top: 12px;
  }
  /deep/ .van-cell__title {
    text-align: left;
  }
  /deep/ .van-field {
    display: block;
    .van-field__label {
      font-size: 13px;
      width: 90%;
    }
  }
  .descript-title {
    background-color: #Fff;
    color: #666666;
    font-size: 12px;
    padding: 16px;
    text-align: left;
  }
}
</style>